<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../../jq/js/jquery.js"></script>
  <!-- https://hamupp.github.io/gitblog/app/jsBasic/jsButtonDownloadFile/index.html -->
</head>

<body>
  <button type="button" id="btn1">下载一个zip（方法1）</button>
  <button type="button" id="btn2">下载一个zip（方法2）</button>
</body>
<script>
  $(function () {
    let $eleBtn1 = $("#btn1");
    let $eleBtn2 = $("#btn2");
    //已知一个下载文件的后端接口：
    // https://codeload.github.com/douban/douban-client/legacy.zip/master
    //方法一：window.open()
    $eleBtn1.click(function () {
      let url = "https://codeload.github.com/douban/douban-client/legacy.zip/master";
      window.open(url);
    });

    //方法二：通过form
    $eleBtn2.click(function () {
      let $eleForm = $(`<form id="form" method='get'></form>`);
      $eleForm.attr("action", "https://codeload.github.com/douban/douban-client/legacy.zip/master");
      $(document.body).append($eleForm);
      //提交表单，实现下载
      $eleForm.submit();
      $("#form").remove();
    });
  });
</script>

</html>